<template>
	<view class="orderList">
		<view class="order_item">
			<view class="item">
				<view class="top">
					<view class="user_info">
						<view class="avatar">
							<image src="../../../static/icon/avatar.png" mode=""></image>
						</view>
						<view class="user_name">
							企业名
						</view>
					</view>
					<view class="far">
						距我1.1千米
					</view>
				</view>
				<!-- 服务内容 -->
				<view class="content">
					<view class="content_item">
						#服务项目#
					</view>
				</view>
				<!-- info -->
				<view class="address">
					地址:
				</view>
				<view class="address">
					<view class="gate">
						评分:<van-rate
							  :value="rate"
							  :size="RateSize"
							  allow-half
							  color="#ee0a24"
							  void-color="#eee"
							  void-icon="star"
							  @change="onChange"
							/>
					</view>
					<view class="done">
						已完成100次服务
					</view>
				</view>
				<!-- baojia -->
				<view class="sub_btn">
					<button type="primary">定制服务</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import VanRate from "/static/dist/rate/index.js"
	export default {
		data() {
			return {
				rate: 3.5,
				RateSize: 25,
			}
		},
		// components: {
		// 	VanRate
		// },
		methods: {
			// 评分
			onChange() {
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderList {
		width: 100%;
		box-sizing: border-box;
		.order_item {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			.item {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				border: 1px solid #f2f2f2;
				border-radius: 30rpx;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
				.top {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #f2f2f2;
					.user_info {
						display: flex;
						height: 100rpx;
						align-items: center;
						
						.avatar {
							width: 80rpx;
							height: 80rpx;
							overflow: hidden;
							border-radius: 50%;
							background-color: #fff;
							border: 1px solid #f2f2f2;
							image {
								width: 80rpx;
								height: 80rpx;
							}
						}
						.user_name {
							margin-left: 20rpx;
						} 
					}
					.far {
						color: #666;
					}
				}
				.content {
					width: 100%;
					box-sizing: border-box;
					padding: 30rpx;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					overflow: hidden;
					.content_item {
						color: #007AFF;
						margin: 10rpx;
					}
				}
				.address {
					width: 100%;
					margin: 20rpx 0;
				}
				.sub_btn {
					width: 100%;
				}
			}
		}
	}
</style>
